// 首先引入config，再引入模块header。由于，header依赖于jquery，index依赖与header，所以，index也中可以使用jQuery。
require(['./config'],()=>{
    require(['template','request','exzoom','cookie','bootstrap','header','footer'],(template,request,exzoom,cookie)=>{
        class Comdetail{
            constructor(){
                this.getTabDetail().then(()=>{
                    this.zoom()
                    this.eventChoose() 
                    this.event() 
                    this.shopNum()                    
                }).then(()=>{
                    this.addToCart()                    
                })
                this.focus()
            }    
            //获取数据渲染页面
            getTabDetail(){
                const id = location.search.slice(4)
                return new Promise(resolve=>{
                    request.getTabDetail(id).then(resp =>{                    
                        if(resp.code === 200){
                            const {
                                id,
                                photo,
                                title,
                                saleNum,
                                qunTitle,
                                price,
                                introduction,
                                expireMsg,
                                couponValue,
                                couponStatus,
                                accessoryHints,
                                commodityId,
                                descContentList,
                                tbItemReview,
                                image
                            } = resp.data.detail
                            this.detail = {
                                id,
                                photo,
                                title,
                                saleNum,
                                qunTitle,
                                price,
                                introduction,
                                expireMsg,
                                couponValue,
                                couponStatus,
                                accessoryHints,
                                commodityId,
                                descContentList,
                                tbItemReview,
                                image
                            }
                            console.log(resp.data.detail)
                            //标题
                            $('.title').html(this.detail.title)
                            //轮播图片
                            $('#imgList').html(template('imgListTemplate',{photo:this.detail.photo}))
                            //商品信息
                            const html = template('informationTemplate',{
                                ...this.detail
                            })
                            $('#information').html(html)
                            //评价数量
                            $('#reviewCount').html(this.detail.tbItemReview.reviewCount)
                            //商品详图
                            $('#imgInfo').html(template('imgInfoTemplate',{descContentList:this.detail.descContentList}))
                            this.cartNumInit() 
                            resolve()
                        }                                                 
                    })
                })
            }
            //放大镜
            zoom(){
                $("#exzoom").exzoom({
                    autoPlay: false
                })
            }
            //商品参数选择
            eventChoose(){      
                $('.good-choose-list').on('click','li',(e)=>{
                    const target = e.target
                    for(let i = 0;i < $('.good-choose-list li').length;i++){
                        $('.good-choose-list li').eq(i).removeClass('ac')
                    }
                    $(target).addClass('ac')
                    console.log($('#span1'))
                    $('#span1').html($('.good-choose-list .ac').html())
                })
                $('.good-choose-list1').on('click','li',(e)=>{
                    const target = e.target
                    for(let i = 0;i < $('.good-choose-list1 li').length;i++){
                        $('.good-choose-list1 li').eq(i).removeClass('ac')
                    }
                    $(target).addClass('ac')
                    $('#span2').html($('.good-choose-list1 .ac').html())
                })
                $('.good-choose-list2').on('click','li',(e)=>{
                    const target = e.target
                    for(let i = 0;i < $('.good-choose-list2 li').length;i++){
                        $('.good-choose-list2 li').eq(i).removeClass('ac')
                    }
                    $(target).addClass('ac')
                    $('#span3').html($('.good-choose-list2 .ac').html())
                })
            }
            //数据加减
            shopNum(){            
                $('.addBtn').on('click',()=>{  
                    $('#numCount').val(Number( $('#numCount').val()) + 1)
                })
                $('.subBtn').on('click',()=>{
                    if(Number( $('#numCount').val()) >= 1){
                        $('#numCount').val(Number( $('#numCount').val()) - 1) 
                        if($('#numCount').val() == 0){
                            $('#numCount').val(1) 
                            alert('最少一件')
                        }
                    }
                })
            }
            //导航定位栏
            event(){
                window.onscroll=function(){
                    var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;
                    if(scrolltop>500){
                        $('.details').css({'position':'fixed','top':'0',"width":"1140px"})
                    }else{
                        $('.details').css('position','relative')
                    }
                }
            } 
            //添加到购物车事件
            addToCart(){
                $('.okBtn').on('click',()=>{
                    let a = Number($('#numCount').val())
                    // 先获取购物车数据
                    let cart = localStorage.getItem('cart')
                    if(cart){
                        cart = JSON.parse(cart)
                        const flag = cart.some(shop=>shop.id === this.detail.id)
                        if(flag){
                            cart = cart.map(shop=>{                                
                                if(shop.id === this.detail.id){
                                    shop.count += a  
                                }                                 
                                return shop
                            })
                        }else{
                            cart.push({...this.detail,count:a})
                        }                        
                        localStorage.setItem('cart',JSON.stringify(cart))
                        this.cartNumInit()
                    }else{
                        localStorage.setItem('cart',JSON.stringify([{...this.detail,count:a}]))
                        this.cartNumInit()
                    }                                       
                })
            }  
            //购物车数量显示
            cartNumInit(){
                let cart = JSON.parse(localStorage.getItem('cart'))
                if(cart){
                    let a = 0
                    cart.forEach(item=>{                            
                        return a+=item.count
                    })
                    $('#count').html(a) 
                }else{
                    $('#count').html(0) 
                }                
            }
            focus(){
                window.onfocus = function() {
                    location.reload()         
                }
            }  
        }
        new Comdetail()
    })
})
